<template>
  <div>
    <div class="login-container">
      <!-- 导航栏 -->
      <van-nav-bar 
      class="page-nav-bar" 
      title="登录"
      >
      <van-icon name="cross" 
      slot="left"
      @click="$router.back()"
      />
    </van-nav-bar>
      <!-- 登录表单 -->
      <!-- 
         1.给van-field组件配置rules验证规则
         2.当表单提交的时候会自动触发表单验证
            如果验证通过会触发submit事件
            反之则不会
       -->
      <van-form @submit="onSubmit" ref="loginForm">
        <van-field
          v-model="user.mobile"
          left-icon="toutiao-shouji"
          name="mobileA"
          placeholder="请输入手机号"
          :rules="userFormRules.mobile"
          type="number"
          maxlength="11"
        >
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
       </van-field>
        <van-field
          v-model="user.code"
          name="codeA"
          placeholder="请输入验证码"
          :rules="userFormRules.code"
          type="number"
          maxlength="6"
          >
          <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i> 
          <template #button>
            <!-- 倒计时 -->
            <van-count-down 
            v-if="isCountDownShow"
            :time="1000 * 10" 
            format="ss s"
            @finish="isCountDownShow = false"
            />
            <van-button 
            v-else
            class="send-sms-btn" 
            native-type="button" 
            round size="small" 
            type="default" 
            @click="onSendSms">发送验证码</van-button>
          </template>
        </van-field>
        <div class="login-btn-wrap">
          <van-button  class="login-btn" block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
  </div>
  </div>
</template>

<script>
import {login,sendSms} from '@/api/user.js'
export default {
    name:"LoginIndex",
    data() {
    return {
      user:{
        mobile:"", //手机号
        code:"" //验证码
      },
      userFormRules:{
        mobile:[{
          required:true, 
          message: '手机号不能为空'
        },{
          pattern: /^1[3/5/7/8/9]\d{9}$/,
          message: '手机号格式错误'
        }],
        code:[{
          required:true,
          message: '验证码不能为空'
        },{
          pattern:/^\d{6}$/,
          message: '验证码格式错误'
        }]
      },
      isCountDownShow: false //是否显示倒计时
      }
    },
    methods: {
     async onSubmit() {
       //1.获取表单数据
        const user = this.user
       //2.表单验证 
       //2.1组件中必须通过this.$toast进行调用Toast组件
       this.$toast.loading({
          message: '登录中...',
          forbidClick: true, //禁用背景被点击
          duration:0 //持续时间默认2秒，如果为0则持续展示
        })
       //3.提交表单请求登录
        try{
          const {data} = await login(user)
          this.$store.commit('setUser',data.data)
          this.$toast.success('登录成功')
          //登录成功,跳转回原页面
          this.$router.back()
        }catch(err){
            if(err.response.status === 400){
              this.$toast.fail('手机号或验证码错误')
            }else{
              this.$toast.fail('登录失败,请稍后重试',err);
            }
         
        }
       //4.根据请求响应结果处理后续操作
      },
     async onSendSms(){
        //1.校验手机号
        try{
          await this.$refs.loginForm.validate('mobileA')
          console.log('验证通过');
        }catch(err){
          return console.log('验证失败',err);
        }
        //2.验证通过显示倒计时
        this.isCountDownShow = true
        //3.请求发送验证码
        try{
          await sendSms(this.user.mobile)
          this.$toast('发送成功')
        }catch(err){
          if(err.response.status === 429){
            this.$toast('发送太频繁，请稍后重试')
          }else{
            this.$toast('发送失败',err)
          }
        }
      }
    },
}
</script>

<style lang="less" scoped>
  .login-container{
    .toutiao{
        font-size: 37px;
    }
    .send-sms-btn{
      background-color:rgb(237,237,237);
      width: 152px;
      height: 46px;
      line-height: 46px;
      font-size: 22px;
      color: rgb(102,102,102);
    }
    .login-btn-wrap{
      padding: 53px 33px;
      .login-btn{
        background-color: rgb(109,180,251);
        border: none;
      }
    }
  }
</style>>
